<template>
  <div>
    <el-button type="success" style="margin-bottom:30px" @click="goback">
      返回
    </el-button>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="快递单号">
        <el-input
          v-model="formInline.expressNo"
          placeholder="快递单号"
          @change="getOrder"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="设备名/编号">
        <el-input
          v-model="formInline.deviceInfo"
          placeholder="设备名/编号"
          @change="getOrder"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="设备类型">
        <el-select
          v-model="formInline.deviceType"
          placeholder="设备类型"
          @change="getOrder"
          clearable
        >
          <el-option
            v-for="item in typelist"
            :label="item.name"
            :value="item.id"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备型号">
        <el-select
          v-model="formInline.deviceModel"
          placeholder="设备型号"
          @change="getOrder"
          clearable
        >
          <el-option
            v-for="item in modellist"
            :label="item.name"
            :value="item.id"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getOrder">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 设备数据 -->
    <el-table :data="deviceList" border style="width: 100%">
      <el-table-column prop="deviceId" label="设备id"> </el-table-column>
      <el-table-column prop="addPerson" label="联系人姓名" width="180">
      </el-table-column>

      <el-table-column prop="deviceNumber" label="设备编号" width="180">
      </el-table-column>
      <el-table-column prop="deviceTypeName" label="设备类型">
      </el-table-column>
      <el-table-column prop="deviceModelName" label="设备型号">
      </el-table-column>
      <el-table-column prop="goodsNumber" label="数量"> </el-table-column>
      <el-table-column prop="add_time" label="添加时间"> </el-table-column>
      <!-- <el-table-column label="操作">
        <template>
          <div>
            <el-button type="primary" size="small">查看详情</el-button>
          </div>
        </template>
      </el-table-column> -->
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="formInline.pageSize"
        :current-page="formInline.pageNumber"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
        class="management_page"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {
  getExpressGoods,
  devicTypeList,
  devicModelList
} from "../../utils/api";
export default {
  data() {
    return {
      formInline: {
        pageNumber: 1,
        pageSize: 10,
        orderSn: "",
        expressNo: "",
        deviceType: "",
        deviceModel: "",
        deviceInfo: "",
        pageType: 1
      },
      //设备数据
      deviceList: [],
      // 类型数据
      typelist: [],
      // 型号数据
      modellist: [],
      count: 0
    };
  },
  created() {
    this.formInline.orderSn = window.sessionStorage.getItem("orderSn1");
    this.getOrder();
    this.getdevice();
    this.getdeviceMOdel();
  },
  methods: {
    //   获取该订单下所有的设备
    getOrder() {
      this.postRequest(getExpressGoods, this.formInline).then(res => {
        if (res.code == 200) {
          this.deviceList = res.data.list;
          this.count = res.data.count;
          // console.log(this.deviceList);
        }
      });
    },
    // 获取设备类型
    getdevice() {
      const params = {
        companyId: 20
      };
      this.postRequest(devicTypeList, params).then(res => {
        if (res.code == 200) {
          this.typelist = res.data;
        }
      });
    },
    //获取设备型号
    getdeviceMOdel() {
      const params = {
        companyId: 20
      };
      this.postRequest(devicModelList, params).then(res => {
        if (res.code == 200) {
          this.modellist = res.data;
        }
      });
    },
    // 分页
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.getOrder();
    },
    handleCurrentChange(val) {
      this.formInline.pageNumber = val;
      this.getOrder();
    },
    // 返回上一级
    goback() {
      this.$store.dispatch("delVisitedViews", this.$route).then(obj => {
        this.$router.push("/devicefenfa");
      });
      window.sessionStorage.removeItem("orderSn1");
    }
  }
};
</script>

<style></style>
